import Ref from "../utils/ref/Ref.js";
import Rente from "../utils/rente/Rente.js";

export default class A extends Rente {

  titles = new Ref(["id", "name", "project", "state", "description", "attachment"]);

  data = new Ref(new Array(15).fill().map((_, index) => ({
    id: index + 1,
    name: "名称" + index,
    project: "项目" + index,
    state: "状态" + index,
    description: "描述" + index,
    attachment: "附件" + index,
  })));

  constructor() {
    super();

    setTimeout(() => {
      this.titles.value = this.titles.value.slice(0, -1);
      this.data.value = new Array(10).fill().map((_, index) => ({
        id: index + 1,
        name: "名称" + index,
        project: "项目" + index,
        state: "状态" + index,
        description: "描述" + index,
        attachment: "附件" + index,
      }));
    }, 300);
  }

  /**
   * @override
   * @return { RenderConfig }
   */
  render() {
    return {
      tag: "table", attrs: { className: "border-table" },
      children: [
        {
          tag: "tr",
          children: [
            Ref.calc((titles) =>
              titles.map(title => ({
                tag: "th",
                children: [
                  title,
                ]
              }))
            , this.titles),
          ]
        },
        Ref.calc((data, titles) =>
          data.map(row => ({
            tag: "tr",
            children: titles.map(title => ({
              tag: "td",
              children: [
                row[title]
              ],
            }))
          }))
        , this.data, this.titles),
        {
          tag: "tr",
          children: ["底部"],
        }
      ],
    };
  };
}
